forum

home / developersection / forums / change color via animations via css

Ask Question

Change color via animations via CSS

Anonymous User 462 20-Jul-2021

 How to add animation in a div to change its color?

css-css3 html  css-css3 
Updated on 20-Jul-2021
Anonymous User

Software Developer Trainee

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

04-Aug-2021

Animations in HTML basically convert one style to another through CSS. It switches up the style with a little bounce. You can change the properties through animation as many times as you want. To use CSS animations, you must specify a certain number of keyframes for the animation.

Let's have a look on a below code : 

<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: red;

            animation: example 4s infinite;

        }

        @keyframes example {

            from {

                background-color: orangered;

            }

            to {

                background-color: greenyellow;

            }

        }

    </style>

</head>

<body>

    <div></div>

    <p><b>Note:</b> When an animation is finished, it continue back from its original style.</p>

</body>

</html>

Hope this information will be helpful for you.

Happy Coding!

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy